<script setup name="UserSelect">
import {userGetList} from "@/api/hrp/user";
import {getCurrentInstance, onMounted, reactive} from "vue";

const {proxy} = getCurrentInstance();
const props = defineProps({

  title: {
    type: String,
    default: "请选择用户"
  },
  // 在表格中调用该控件，可能需要回传选中的值，在回调ok的函数中会回传。
  // 表格中的index号，用于回传给调用者
  indexRow: {
    type: Number,
    default: null,
  },
  // 输入的id，用于 3、4样式的数据展示
  // 每个对象的主键类型可能不一样，大部分的都是Number类型的。
  code: {
    type: Number,
    default: null,
  },
  // 数据过滤参数
  params: {
    type: Object,
    default: null
  },
  // 因为有可能在表格中供用户选择，如果每行数据都刷新一次，数据库消耗太大了。
  // 在页面外面获取一次，每个行的每个对象都能使用了
  objList: {
    type: Array,
    default: null,
  }
});
onMounted(() => {
  initUserSelect()
})
let pd = reactive({
  userList: [],
  open: false,
  loading: true,
  total: 0,
  reParams: [],
  queryParams: {
    enableFlag: "0"
  }
});

// 查询表数据
function getList() {
  pd.loading = true;
  userGetList(pd.queryParams).then(res => {
    pd.userList = res.data;
    pd.total = res.total;
    pd.loading = false;
  });
}

/** 搜索按钮操作 */
function handleQuery() {
  pd.queryParams.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

defineExpose({
  initUserSelect
});
const emit = defineEmits(["ok"]);

/** 选择框返回*/
function handleSelectChange(item) {
  pd.reParams.code = item;
  pd.reParams.indexRow = props.indexRow;
  emit("ok",pd.reParams);
}

//数据变化页面需要变化
watch(() => props.objList, val => {
  pd.userList = props.objList;
}, {deep: true, immediate: true});

const dataCode = computed({
  get() {
    return props.code
  },
  set(val) {
    emit('update:code', val)
  }
})

// 初始化3、4样式的展示
function initUserSelect() {
  if (pd.userList) {
    return
  }
  if (props.objList) {
    pd.userList = props.objList;
    pd.dataKey = props.dataKey;
    return;
  }
  if (!pd.userList) {
    getList();
  }
}

// 在获取焦点的时候，如果objLis还是null那就从数据库获取
function handleOnFocus() {
  initUserSelect()
}
</script>

<template>
  <el-select v-model="dataCode" filterable
             @change="handleSelectChange" @focus="handleOnFocus" :placeholder="props.title" clearable>
    <el-option v-for="item in pd.userList" :key="item.id" :label="item.name" :value="item.id"/>
  </el-select>
</template>